/**
* @desc:  通行记录
* @author huangjie
* @date 2024-6-14 14:33:25
*/
<template>
    <div class="page-container h-100">
        <div class="wrapperform m-b-16">
            <div class="searchbox">

                <el-form ref="form" :inline="true" :model="form" class="demo-form-inline">
                  <!--操作类型-->
                  <el-form-item :label="$t('Type of operation')">
                    <el-select v-model="form.deviceCommand"
                               placeholder="">
                      <el-option :label="item.label" :value="item.id"
                                 v-for="(item,index) in deviceCommandList"
                                 :key="item.id"></el-option>
                    </el-select>
                  </el-form-item>
                  <!--通行时间-->
                  <el-form-item :label="$t('time')" prop="createTime">
                    <el-date-picker
                        v-model="form.createTime"
                        style="width: 240px"
                        type="daterange"
                        align="right"
                        format="yyyy-MM-dd"
                        range-separator="~"
                        :start-placeholder="this.i18n.t('Start Date')"
                        :end-placeholder="this.i18n.t('End Date')"
                        :picker-options="pickerOptions">
                    </el-date-picker>
                  </el-form-item>
                  <el-form-item class="BlankPlaceholder " label=".">
                    <!--<button @click="getJson">get json</button>-->
                    <!--重置-->
                    <el-button size="small" type="handle" @click="resetSearch">{{this.i18n.t('Reset')}}</el-button>
                    <!--查询-->
                    <el-button size="small" type="primary" @click="onSearch">{{this.i18n.t('Query')}}</el-button>
                  </el-form-item>

                </el-form>
            </div>
        </div>

        <div class="table-container table-box globalDiv tableView">
            <BaseGlobalTable :table_config="table_config"
                             @handelDetail="handelDetail"
                             ref="globalTable"></BaseGlobalTable>
        </div>
        <detail ref='detail' :editTableRow='editTableRow' :detailFlag.sync='detailFlag' v-if='detailFlag'></detail>
        <addViewEdit ref='addViewEdit' :dialogType="dialogType" :editTableRow='editTableRow'
                     :addViewEditFlag.sync='addViewEditFlag' v-if='addViewEditFlag'></addViewEdit>
    </div>
</template>

<script>
    import {deviceTypeList, deviceUpdateType,trafficState,identificationType} from '@/assets/common/js/utils/deviceConfig.js'
    import {devicemodelgetlist, getList} from "@/api/jxgl";
    import {deleteDocument} from "../../../api/document";
    //  客户信息管理详情
    import detail from './detail.vue';

    // 引入新增修改弹框
    // import addViewEdit from './addViewEdit.vue'

    export default {
        name: "sbsj_index",
        components: {
            // addViewEdit,
            detail
        },
        props: {},
        data() {
            return {
                identificationTypeArr:[],
                trafficStateArr:[],
                regDate: '',
                dialogType: '',
                value2: '',
                pickerOptions: {
                    shortcuts: [{
                        // 最近一周
                        text: this.i18n.t('Last week'),
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        // 最近一个月
                        text: this.i18n.t('Last month'),
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        // 最近三个月
                        text: this.i18n.t('Last three months'),
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit('pick', [start, end]);
                        }
                    }]
                },
                devOptions: [],
                orgInfo: [],
                defaultProps: {
                    multiple: true,
                    children: 'departmentInfos',
                    label: 'name',
                    value: 'id',
                    checkStrictly: false,
                    disabled: function (data, node) {

                    }
                },
                deviceCommandList: [
                    {
                        id: null,
                        label: '全部',
                    },
                    {
                        id: 1,
                        label: '清空人员',
                    },
                    {
                        id: 2,
                        label: '人员重置',
                    },
                    {
                        id: 3,
                        label: '关门',
                    },
                    {
                        id: 4,
                        label: '上锁',
                    },
                    {
                        id: 5,
                        label: '开门',
                    },
                    {
                        id: 6,
                        label: '开锁',
                    },
                    {
                        id: 7,
                        label: '恢复出厂',
                    },
                    {
                        id: 8,
                        label: '重启',
                    },
                ],
                stateList: [
                    {
                        id: 0,
                        label: '成功',
                    },
                    {
                        id: 1,
                        label: '失败',
                    },
                    {
                        id: 2,
                        label: '部分成功',
                    },
                    {
                        id: 3,
                        label: '下发中',
                    },
                ],
                form: {
                    deviceCommand: null,
                    orderBy:[],
                    createTime: null,
                    endTime:null,
                    startTime:null
                },
                // 数据分析
                table_config: {
                    table_tbody: [],
                    thead: [
                        // 序号
                        {label: "序号", prop: "@id", type: "index", width: "100"},
                        // 操作类型
                        {label: this.i18n.t('Type of operation'), prop: "deviceType", width: "",type: "function", callback: (row) => {
                                return row.deviceCommand ? this.getType(row.deviceCommand, this.deviceCommandList) : '-'
                            }},
                        // 设备名称
                        {
                            label:this.i18n.t('Device name'), prop: "deviceName", width: "",type: "function", callback: (row) => {
                                return row.deviceNames ? row.deviceNames.join('，'):'-'
                            }
                        },
                        // 状态
                        {label: this.i18n.t('status'), prop: "deviceType", width: "",type: "function", callback: (row) => {
                                return row.state ? this.getType(row.state, this.stateList) : '-'
                            }},
                        // 指令下发进度
                        {label: this.i18n.t('Instruction delivery progress'), prop: "passBy", type: "function", width: "",callback:(row)=>{
                                return row.progress||'-'
                            }},
                        // 创建人
                        {label: this.i18n.t('founder'), prop: "success", type: "function", width: "", callback: (row) => {
                                return row.creator||'-'
                            }},
                        // 下发时间
                        {
                            label: this.i18n.t('Distribution time'), prop: "passDateTime", width: "", type: "function", callback: (row) => {
                                return row.sendDateTime||'-'
                            }
                        },
                        {
                            // 操作
                            label: this.i18n.t('operation'),
                            prop: "operation",
                            // 当前列的类型，不填为直接渲染文本，function 为调用回调函数，operation 为操作按钮，image 为显示图片
                            type: "operation",
                            width: 130,
                            // 按钮的风格，为 true 则显示自定义图标，为 false 显示 按钮样式
                            icon: true,
                            // 图标风格按钮列表
                            iconClass: [

                                {
                                    type: "detail",
                                    class: "icon-eye",
                                    title: this.i18n.t('view'),//查看
                                    callback: "handelDetail",
                                    power: "",
                                },
                            ],
                        },
                    ],
                    // 列表前面是否需要显示 checkbox 框，如要显示 值写成 true
                    checkbox: false,
                    index: true,
                    showPagination: true, // 翻页器
                    // 请求表格数据的 url ，可直接传入
                    url: 'devicecommandsendrecord/pagesearchdevicecommandsendrecord',
                    // 请求表格数据的 方式
                    method: "post",
                    //表格 title 文字
                    tableTitle: false,
                    //是否需要给 th 加 样式boder 如果需要加上addBoderClass 不需要显示空或者不加这个字段配置
                    addBoderClass: "addBoderClass",
                },
                selectRow: [],
                editTableRow: null,
                detailFlag: false,
                addViewEditFlag: false,

            };
        },
        computed: {},
        watch: {},
        mounted() {
            this.setTableHeight()
            this.identificationTypeArr=identificationType
            this.trafficStateArr=trafficState

            this.devOptions = deviceTypeList
            if (this.form.createTime === null) {
                delete this.form.createTime
            }
            this.$refs.globalTable.loading_data(this.form);
            window.onresize = ()=>{
                this.setTableHeight()
            }
        },
        methods: {
            getType(num, arr){
                let typeLabel;
                arr.forEach(item => {
                    if (item.id == num) {
                        typeLabel = item.label;
                    }
                })
                return typeLabel;
            },
            setTableHeight(){
                console.log('可视区高度',document.documentElement.clientHeight);
                console.log('表格距离顶部高度',document.getElementsByClassName('tableView')[0].offsetTop);
                // this.$set(this.table_config,'height',window.innerHeight-428)
                this.$set(this.table_config,'height',document.documentElement.clientHeight-document.getElementsByClassName('tableView')[0].offsetTop-116)
            },
            getJson(){
                console.log(this.$refs.cascader.getCheckedNodes());
            },
            resetSearch() {
                this.form.name=null
                this.form.createTime=null
                this.form.startTime=null
                this.form.endTime=null
                this.$refs.globalTable.loading_data(this.form);
            },
            onSearch() {
                // console.log("选中的数据",this.$refs.cascader.getCheckedNodes());
                console.log(this.form);
                if(this.form.name===""){
                    this.form.name=null
                }
                if(this.form.success===""||this.form.success===null){
                    this.form.success=null
                }
                if(this.form.createTime){
                    var formatStr="yyyy-MM-dd"
                    this.form.startTime=new Date(this.form.createTime[0]).format(formatStr)+' 00:00:00'
                    this.form.endTime=new Date(this.form.createTime[1]).format(formatStr)+' 23:59:59'
                }else{
                    this.form.createTime=null
                    this.form.startTime=null
                    this.form.endTime=null
                }
                var params=JSON.parse(JSON.stringify(this.form))
                if(params.success!=null){
                    params.success=params.success==1?true:false
                }
                delete params.createTime
                console.log(11, this.form);
                // if (this.form.deviceCommand.length === 0) {
                //     this.form.deviceCommand = 0;
                // } else {
                //     this.form.deviceCommand = parseInt(this.form.deviceCommand);
                // }
                // console.log(22, typeof this.form.deviceCommand);
                this.$nextTick(() => {
                    this.$refs.globalTable.loading_data(params);
                });
                // this.W.$tips('warning', '未实现');
            },

            // 获取表格数据
            getTableData() {
                this.$nextTick(() => {
                    this.$refs.globalTable.loading_data(this.form);
                });
            },

            getFormData(){
                var params = JSON.parse(JSON.stringify(this.form))
                if (this.form.createTime) {
                     var formatStr = "yyyy-MM-dd"
                    params.startTime = new Date(this.form.createTime[0]).format(formatStr) + ' 00:00:00'
                    params.endTime = new Date(this.form.createTime[1]).format(formatStr) + ' 23:59:59'
                }
                return params
            },
            /**
             * @param arr:{data} --当前行数据
             * @return: not
             * 表格查看的回调
             */
            handelDetail(data) {
                console.log(397, data);
                this.dialogType = 'view';
                this.editTableRow = data.details;
                this.editTableRow.success = this.i18n.t(this.trafficStateArr[this.editTableRow.success?0:1].label);
                // this.detailFlag = true;
            },
        },
    };
</script>

<style scoped lang="scss">
.right-height {
  height: calc(100% - 36px);
}

::v-deep .content-width .el-form.wrapperform-box .el-form-item {
  width: calc((100% - 100px) / 3);
}
::v-deep #deviceType{
  width: 320px !important;
}

</style>
<style>
@media screen and  (max-width: 1428px) {
  .txjl.BlankPlaceholder .el-form-item__label{
    display: none !important;
  }
}
</style>

